<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { MainHomeExploreDataChildItem } from '../../types/main-home-explore-data-item'
	const props = defineProps({
		dataList: { // 数据列表
			type: Array<MainHomeExploreDataChildItem>,
			required: true
		},
		live: { // 是否为直播
			type: Boolean,
			required: false,
			default: false
		},
		iconType: { // 右下角的图标类型
			type: String,
			required: true,
		},
		miniMovie: {
			type: Boolean,
			default: false
		},
		customFooter: {
			type: Boolean,
			default: true
		}
	})
	const dataLeft = computed(() => props.dataList.filter((_, index) => index % 2 === 0))
	const dataRight = computed(() => props.dataList.filter((_, index) => index % 2 !== 0))
</script>
<template>
	<view class="scroll-container">
		<view class="scroll-container-list">
			<com-grid-item v-for="item in dataLeft" :key="item.image" :data="item" :live="live" :icon-type="iconType"
				:miniMovie="miniMovie" :customFooter="customFooter"></com-grid-item>
		</view>
		<view class="scroll-container-list">
			<com-grid-item v-for="item in dataRight" :key="item.image" :data="item" :live="live" :icon-type="iconType"
				:miniMovie="miniMovie" :customFooter="customFooter"></com-grid-item>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.scroll-container {
		display: flex;
		flex-direction: row;
		gap: 8rpx;
		padding: 10rpx;
		background-color: #f7f7f7;

		.scroll-container-list {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}
</style>